<template>
  <div class="my-activities">
    <van-nav-bar
      title="我参与的活动"
      left-arrow
      @click-left="router.back()"
      fixed
    />
    
    <div class="content">
      <van-tabs v-model:active="activeTab">
        <van-tab title="全部">
          <activity-list :activities="activities" @click="goToDetail" />
        </van-tab>
        <van-tab title="进行中">
          <activity-list :activities="ongoingActivities" @click="goToDetail" />
        </van-tab>
        <van-tab title="已结束">
          <activity-list :activities="finishedActivities" @click="goToDetail" />
        </van-tab>
      </van-tabs>
      
      <van-empty v-if="activities.length === 0" description="暂无参与的活动" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useActivityStore } from '@/stores/activity';
import ActivityList from '@/components/activity/ActivityList.vue';
import { showToast } from 'vant';

const router = useRouter();
const activityStore = useActivityStore();
const activities = ref([]);
const activeTab = ref(0);
const loading = ref(false);

// 根据活动状态过滤
const ongoingActivities = computed(() => {
  return activities.value.filter(activity => {
    const now = new Date();
    const endTime = new Date(activity.endTime);
    return endTime > now;
  });
});

const finishedActivities = computed(() => {
  return activities.value.filter(activity => {
    const now = new Date();
    const endTime = new Date(activity.endTime);
    return endTime <= now;
  });
});

onMounted(async () => {
  loading.value = true;
  try {
    // 获取用户参与的活动
    const result = await activityStore.fetchUserActivities();
    activities.value = result;
  } catch (error) {
    showToast('获取活动列表失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
});

const goToDetail = (id) => {
  router.push(`/activity/detail/${id}`);
};
</script>

<style scoped>
.my-activities {
  padding-top: 46px;
  padding-bottom: 20px;
}

.content {
  padding: 16px;
}

.van-tabs {
  margin-bottom: 16px;
}
</style>